<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=0'>
	<title>李思博的100天</title>
	<style>
		*{padding: 0;margin:0;}
		body,html{width: 100%;height: 100%;font-size: 1vw;background-color: #111;transform: rotateZ(0deg);}
			
		 img:nth-child(1),
		 img:nth-child(3),
		 img:nth-child(8),
		 img:nth-child(9),
		 img:nth-child(10){
			width: 20rem;
			height: auto;
			animation: to-here 2s ease-in-out forwards;
		}
		 img:nth-child(2),
		 img:nth-child(4),
		 img:nth-child(5),
		 img:nth-child(6),
		 img:nth-child(7){
			height: 20rem;
			width: auto;
		}
		img{
			position: relative;
			outline: none;
			border:1rem solid rgba(255,255,255,.9);
			cursor: pointer;
			border-radius: 3px;
		}
		img:hover{
			animation: move 1s ease-in-out both;
		}
		@keyframes move{
			from{transform:rotate(0deg) scale(1);z-index: 1;}
			to{transform:rotate(360deg) scale(2);z-index: 99;}
		}
	</style>
</head>
<body>
		<img src="img-bbd/1.JPG" alt="" >
		<img src="img-bbd/2.JPG" alt="" >
		<img src="img-bbd/3.JPG" alt="" >
		<img src="img-bbd/4.JPG" alt="" >
		<img src="img-bbd/5.JPG" alt="" >
		<img src="img-bbd/6.JPG" alt="" >
		<img src="img-bbd/7.JPG" alt="" >
		<img src="img-bbd/8.JPG" alt="" >
		<img src="img-bbd/9.JPG" alt="" >
		<img src="img-bbd/10.JPG" alt="" >

	<script>
		var oImgs = document.querySelectorAll('img'),
			length = oImgs.length;
		for (var i = 0; i < length; i++) {			
			oImgs[i].style.transform = 'rotate('+(~~(Math.random()*91)-45)+'deg) scale(1)';			
		}
	</script>
</body>
</html>